<template>
    <div>
        <a-card class="mb1 filterForm">
            <a-form layout="inline" :model="filterForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                <a-form-item label="文章名称">
                    <a-input v-model:value="filterForm.name" />
                </a-form-item>
                <a-form-item label="创建人">
                    <a-select v-model:value="filterForm.creater" placeholder="请选择人员">
                        <a-select-option value="1">张三</a-select-option>
                        <a-select-option value="2">李四</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item >
                    <a-button type="primary" @click="filterData">搜索</a-button>
                </a-form-item>
            </a-form>
        </a-card>
        <a-table :loading="loading" :columns="columns" :data-source="tableData" :pagination="pagination">
            <template #content="{text}">
                <p class="Overflow">{{text}}</p>
            </template> 
            <template #action="{ record }">
                <span>
                    <a @click="showEdit=true">编辑</a>
                    <a-divider type="vertical" />
                    <a @click="deleteRecord(record.id)">删除</a>
                    <a-divider type="vertical" />
                    <a @click="Router.push({path:`/user/${record.key}`})">详细</a>
                </span>
            </template>
        </a-table>

        <!-- 创建编辑记录 -->
        <a-modal v-model:visible="showEdit" :rules="rules" title="创建编辑用户">
             <a-form ref="formRef" :model="formData" :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
                <a-form-item label="名字" name="name">
                     <a-input v-model:value="formData.name" placeholder="请输入名字" />
                </a-form-item>
                <a-form-item label="年龄" name="age">
                    <a-input-number v-model:value="filterForm.age"  placeholder="请输入年龄" />
                </a-form-item>
                <a-form-item label="地址" name="address">
                    <a-select v-model:value="filterForm.address" placeholder="请选择地址">
                        <a-select-option value="1">格鲁吉亚</a-select-option>
                        <a-select-option value="2">南奥塞梯</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="附件" name="file">
                    <upload v-model:value="filterForm.file">
                    </upload>
                </a-form-item>
             </a-form>
        </a-modal>
    </div>
</template>
<script lang="ts">
import { defineComponent,reactive, toRefs,computed,UnwrapRef,toRaw,createVNode} from 'vue';
import { Modal,message } from 'ant-design-vue';
import {useRouter} from "vue-router"
interface filterState{  //筛选字段
    name:string,
    creater:number|undefined,
}
interface dataType{ //其他类型设置
    current:number,
    total:number,
    showEdit:boolean,
    loading:boolean
}
interface FormState{   //提交表格限制
    
}

const columns = [
    {title: '文章名',align:"center",dataIndex: 'name',key: 'name',},
    {title: '内容',align:"center",dataIndex: 'content',key: 'content',slots: { customRender: 'content' }},
    {title: '创建时间',align:"center",dataIndex: 'create_date',key: 'create_date',},
    {title: '创建人',align:"center",dataIndex: 'creater',key: 'creater',},
    {title: '操作',align:"center",key: 'action',slots: { customRender: 'action' }},
];

const tableData:object[] = [];
for (let i = 0; i < 30; i++) {
    tableData.push({key: i,name: '前端es6语言教程',content: 'ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。',create_date:"2020/02/14 13:45:42",creater:"何文飞"})
}

export default defineComponent({
    setup() {
        const Router=useRouter()
        const data=reactive<dataType>({
            current: 1,
            total:0,
            showEdit:false,
            loading:false,
        })
        const filterForm:UnwrapRef<filterState>=reactive({  //筛选表格
            name:"",
            creater:undefined,
        })

        const formData:UnwrapRef<FormState>=reactive({})  //提交表格
        const rules = {
            name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
            age: [{ required: true, message: '请输入年纪', trigger: 'blur' }],
            address: [{ required: true, message: '请选择地址', trigger: 'change', type: 'object' }],
        }

        const filterData=()=>{     //筛选操作
            data.loading=true
            console.log(toRaw(filterForm))
        }
        const deleteRecord=(id:number)=>{
            Modal.confirm({
                title: '温馨提示?',
                content: '确定删除该项记录吗？',
                onOk() {
                    message.success('删除成功!') 
                },
            });
        }

        const refData=toRefs(data)
        const pagination=computed(()=>({
            total: 100,
            current: 1,
            pageSize:30,
        }))
        return {
            Router,
            ...refData,
            columns,
            tableData,
            pagination,
            filterForm,

            formData,
            rules,

            deleteRecord,
            filterData
        };
    },
});
</script>
<style lang="scss" scoped>
    .Overflow{width: 300px;text-overflow:ellipsis;white-space: nowrap;overflow: hidden;margin: 0 auto;}
</style>

